<template>
  <div class="main-info">
    <span class="info-label">{{total}} item left</span>
    <ul>
      <li :class="{'active':item===activeNav}" @click="handleNav(item)" v-for="item in nav" :key="item">{{item}}</li>
    </ul>
    <button @click="$emit('clearAll')">clear completed</button>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0,
    },
  },
  name: 'TodoInfo',
  data() {
    return {
      nav: ['all', 'active', 'completed'],
      activeNav: '',
    }
  },
  methods: {
    handleNav(item) {
      this.activeNav = item
      this.$emit('handleNav', item)
    },
  },
}
</script>

<style lang="stylus" scoped>
.main-info
  display: flex
  align-items: center
  justify-content: space-between
  border-top: 1px solid #F7F8F9
  padding: 10px 20px
  box-sizing: border-box

  .info-label
    color: red

  button
    outline: none
    border: none
    padding: 4px 10px
    background: #3d86fe
    border-radius: 4px
    color: #fff
    cursor: pointer
    font-size: 16px

ul
  list-style: none
  display: flex

  li
    margin: 0 10px
    border: 1px solid rgb(255, 157, 154)
    padding: 2px 10px
    border-radius: 6px

    &.active
      background: rgb(255, 157, 154)
      color: #FFF
</style>
